<template>
    <div class="container">
      <Row class="btn-action">
        <Col span="24">
          <Button type="primary" class="mp10" :loading="loading" @click="exportData(1)"><Icon type="ios-download-outline"></Icon>导出全部数据</Button>
        </Col>
      </Row>
        <Table border :columns="tableColumnsPC" :data="fcDataList" size="small" ref="table">
        </Table>
    </div>
</template>

<script>
import { findAllCityList, findAppAllCityList } from '@/api/yi-qing-fang-kong'
export default {
  name: 'city-app-data-list',
  data () {
    return {
      loading: true,
      loadData: true,
      inoutCity: { provinceList: [], city1: [], city2: [] },
      params: { city2: [], province2: [], city3: [], province3: [] },
      cityArr: [],
      cityObj: {
        city2: []
      },
      deleteCity: '',
      paramObj: {},
      tableColumnsPC: [
        {
          title: '区县',
          key: 'area',
          align: 'center',
          width: 100,
          tooltip: true,
          fixed: 'left'
        }
        // {
        //  title: '黑龙江',
        //  key: 'hlj',
        //  align: 'center',
        //  width: 80,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#F3A94F'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '当日新增',
        //  key: 'hlj1',
        //  align: 'center',
        //  width: 100,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#91908E'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '其中哈尔滨',
        //  key: 'heb',
        //  align: 'center',
        //  width: 110,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#088E81'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '当日新增',
        //  key: 'heb1',
        //  align: 'center',
        //  width: 100,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#96BFFF'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '河南',
        //  key: 'hn',
        //  align: 'center',
        //  width: 80,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#F3A94F'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '当日新增',
        //  key: 'hn1',
        //  align: 'center',
        //  width: 100,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#91908E'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '其中信阳',
        //  key: 'xy',
        //  align: 'center',
        //  width: 100,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#088E81'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '当日新增',
        //  key: 'xy1',
        //  align: 'center',
        //  width: 100,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#96BFFF'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '浙江',
        //  key: 'zj',
        //  align: 'center',
        //  width: 80,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#F3A94F'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '当日新增',
        //  key: 'zj1',
        //  align: 'center',
        //  width: 100,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#91908E'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '其中温州',
        //  key: 'wz',
        //  align: 'center',
        //  width: 100,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#088E81'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '当日新增',
        //  key: 'wz1',
        //  align: 'center',
        //  width: 100,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#96BFFF'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '山东',
        //  key: 'sd',
        //  align: 'center',
        //  width: 80,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#F3A94F'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '当日新增',
        //  key: 'sd1',
        //  align: 'center',
        //  width: 100,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#91908E'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '河北',
        //  key: 'hb',
        //  align: 'center',
        //  width: 80,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#088E81'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '当日新增',
        //  key: 'hb1',
        //  align: 'center',
        //  width: 100,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#96BFFF'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '吉林',
        //  key: 'jl',
        //  align: 'center',
        //  width: 80,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#F3A94F'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '当日新增',
        //  key: 'jl1',
        //  align: 'center',
        //  width: 100,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#91908E'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '北京',
        //  key: 'bj',
        //  align: 'center',
        //  width: 80,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#088E81'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '当日新增',
        //  key: 'bj1',
        //  align: 'center',
        //  width: 100,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#96BFFF'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '广东',
        //  key: 'gd',
        //  align: 'center',
        //  width: 80,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#088E81'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // },
        // {
        //  title: '当日新增',
        //  key: 'gd1',
        //  align: 'center',
        //  width: 100,
        //  renderHeader: (h, params) => {
        //    return h('span', [
        //      h('span', {
        //        style: {
        //          'color': '#96BFFF'
        //        }
        //      }, params.column.title)
        //    ])
        //  }
        // }
      ],
      fcDataList: [],
      type: '',
      areaArr: ['铁西区', '辽中区', '苏家屯区', '皇姑区', '浑南区', '法库县', '沈河区', '沈北新区', '新民市', '康平县', '大东区', '和平区', '于洪区']
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  watch: {
    $route: function (to, from) {
      console.log(this.$route.query.type, to, '!@!@#@')
      this.type = this.$route.query.type
      this.selectlist()
    }
  },
  methods: {
    selectlist () {
      this.getList()
    },
    getList () {
      if (this.type === 'pc') {
        this.paramObj['starttime'] = this.$route.query.startTime
        this.paramObj['endtime'] = this.$route.query.endTime
        this.paramObj['daystarttime'] = this.$route.query.dayStartTime
        this.paramObj['dayendtime'] = this.$route.query.dayEndTime
        this.paramObj['inout_state'] = this.$route.query.inout_state
        findAllCityList(this.paramObj).then(res => {
          if (res.data.errcode === 0) {
            for (var i = 0; i < res.data.data.allList[0].length; i++) {
              let obj2 = {
                title: '',
                key: '',
                align: 'center',
                width: 150,
                renderHeader: (h, params) => {
                  return h('span', [
                    h('span', {
                      style: {
                        'color': '#F3A94F'
                      }
                    }, params.column.title)
                  ])
                }
              }
              let obj3 = {
                title: '',
                key: '',
                align: 'center',
                width: 100,
                renderHeader: (h, params) => {
                  return h('span', [
                    h('span', {
                      style: {
                        'color': '#088E81'
                      }
                    }, params.column.title)
                  ])
                }
              }
              console.log(res.data.data.allList[0][i].city)
              obj2.title = res.data.data.allList[0][i].province + res.data.data.allList[0][i].city
              obj3.title = '每日新增'
              obj2.key = 'num' + (i * 2)
              obj3.key = 'num' + (i * 2 + 1)
              this.tableColumnsPC.push(obj2, obj3)
            }
            let tableData = []
            tableData.allList = res.data.data.allList
            tableData.dayallList = res.data.data.dayallList
            let allArr = []
            for (var j = 0; j < 14; j++) {
              // let obj = []
              let objj = {}
              objj['area'] = tableData.dayallList[j][0].area
              objj['dayallList'] = tableData.dayallList[j]
              objj['allList'] = tableData.allList[j]
              allArr.push(objj)
            }
            console.log(allArr, 'fsafsdfsad')
            this.fcDataList = allArr
            let obj = []
            for (var m = 0; m < this.fcDataList.length; m++) {
              for (var n = 0; n < this.fcDataList[m].allList.length; n++) {
                obj[n * 2] = this.fcDataList[m].allList[n].num
                obj[n * 2 + 1] = this.fcDataList[m].dayallList[n].num
                this.fcDataList[m]['num' + n * 2] = this.fcDataList[m].allList[n].num
                this.fcDataList[m]['num' + (n * 2 + 1)] = this.fcDataList[m].dayallList[n].num
              }
            }
            // for (var k = 0; k < tableData.allList.length; k++) {
            //  var newObj1 = Object.assign(tableData.allList[k], allArr[k])
            //  this.fcDataList.push(newObj1)
            // }
            console.log(this.fcDataList, '13123123')
            this.loading = false
          } else {
            this.$Notice.error({ title: '查看失败', desc: '查询省市地址信息失败' })
          }
        })
      } else if (this.type === 'app') {
        this.paramObj['starttime'] = this.$route.query.startTime
        this.paramObj['endtime'] = this.$route.query.endTime
        this.paramObj['daystarttime'] = this.$route.query.dayStartTime
        this.paramObj['dayendtime'] = this.$route.query.dayEndTime
        this.paramObj['inout_state'] = this.$route.query.inout_state
        findAppAllCityList(this.paramObj).then(res => {
          if (res.data.errcode === 0) {
            for (var i = 0; i < res.data.data.allList[0].length; i++) {
              let obj2 = {
                title: '',
                key: '',
                align: 'center',
                width: 150,
                renderHeader: (h, params) => {
                  return h('span', [
                    h('span', {
                      style: {
                        'color': '#F3A94F'
                      }
                    }, params.column.title)
                  ])
                }
              }
              let obj3 = {
                title: '',
                key: '',
                align: 'center',
                width: 100,
                renderHeader: (h, params) => {
                  return h('span', [
                    h('span', {
                      style: {
                        'color': '#088E81'
                      }
                    }, params.column.title)
                  ])
                }
              }
              console.log(res.data.data.allList[0][i].city)
              obj2.title = res.data.data.allList[0][i].province + res.data.data.allList[0][i].city
              obj3.title = '每日新增'
              obj2.key = 'num' + (i * 2)
              obj3.key = 'num' + (i * 2 + 1)
              this.tableColumnsPC.push(obj2, obj3)
            }
            let tableData = []
            tableData.allList = res.data.data.allList
            tableData.dayallList = res.data.data.dayallList
            let allArr = []
            for (var j = 0; j < 14; j++) {
              // let obj = []
              let objj = {}
              objj['area'] = tableData.dayallList[j][0].area
              objj['dayallList'] = tableData.dayallList[j]
              objj['allList'] = tableData.allList[j]
              console.log(objj, 'objj')
              allArr.push(objj)
            }
            this.fcDataList = allArr
            let obj = []
            for (var m = 0; m < this.fcDataList.length; m++) {
              for (var n = 0; n < this.fcDataList[m].allList.length; n++) {
                obj[n * 2] = this.fcDataList[m].allList[n].num
                obj[n * 2 + 1] = this.fcDataList[m].dayallList[n].num
                this.fcDataList[m]['num' + n * 2] = this.fcDataList[m].allList[n].num
                this.fcDataList[m]['num' + (n * 2 + 1)] = this.fcDataList[m].dayallList[n].num
              }
            }
            console.log(this.fcDataList, '13123123')
            this.loading = false
          } else {
            this.$Notice.error({ title: '查看失败', desc: '查询省市地址信息失败' })
          }
        })
      }
    },
    exportData (type) {
      if (this.fcDataList === '') { // 没有数据需加载接口
        this.loading = true
        // this.getAllList()
      } else {
        this.loading = false
        // window.open(this.fcAllDataStr)
        this.$refs.table.exportCsv({
          filename: '城市统计数据',
          columns: this.tableColumnsPC,
          data: this.fcDataList.map(item => {
            return item
          }),
          original: false
        })
      }
    }
  },
  mounted () {
    this.type = this.$route.query.type
    this.selectlist()
  }
}
</script>

<style scoped>
    .page_style {
        margin: 20px 5px;
    }

    .input-frame {
        width: 120px;
        margin-right: 10px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .table-action-btn {
        margin-right: 3px;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-bottom: 10px;
    }

    .mp10 {
        margin-right: 10px;
    }
    .title-style {
      color: red;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .ivu-table-row {
      height: 57px;
    }
    .demo-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
      from { transform: rotate(0deg);}
      50%  { transform: rotate(180deg);}
      to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
      height: 100px;
      position: relative;
      /*border: 1px solid #eee;*/
    }
</style>
